<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的主页</title>
		<style type="text/css">
			
			*{
				margin: 0;	
				box-sizing: border-box;			
			}
			body{
				background-color: #FFCCFF ;
			}
			
			img{
				width: 100%;
			}
			div{
				margin: 20px auto;
				width: 50%;
				border: 6px dotted black;
				text-align: center;
				font-family: 黑体;
				
			}
			#home img{
				width: 600px;
			}
			#school img{
				width: 400px;
			}
			#idol img{
				width: 400px;
			}
			#bj{
				width: 940px;
				height: 500px;
				background-image: url(bj.jpg);
				background-position: 50% 50%;
				position: relative;
				border: none;
			}
			#bj img{
				width: 150px;				
				border-radius: 75px;
				border: 8px white solid;
				display: block;
			}
			#one{
				position: absolute;
				top:100px;
				left: 20px;
			}
			#two{
				position: absolute;
				top:300px;
				right: 100px;
			}
			
			#three{
				position: absolute;
				top:100px;
				left: 500px;
			}
			#four{
				position: absolute;
				top:200px;
				left: 200px;
			}
			
			h1{
				font-family: 黑体;
				margin: 20px 200px;
				font-size: 45px;
			}
			
			
			ul li{
				list-style: none;
				background-color: #CCCCFF ;
				float: left;
				width: 180px;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
										
			}							
			ul{
				
				overflow: hidden;
				margin: 0 560px;				
			}
			
			a{
				display: inline-block;
				padding: 0 2em;
				text-decoration: none;
			}
			
			a:hover{
				text-decoration: none;
				background-color:#9999FF ;
				color: white;				
			}
			#bottom{
				border:none;
				display: inline-block;
				width: 50px;
				height: 78px;
				position: fixed;
				right: 0;
				bottom: 0;				
			}
			
			
			
			
		</style>
	</head>
	<body>
		<img src="big.jpg" alt="" />
		<h1>欢迎来到我的主页</h1>
		
		<ul>
			<li><a href="#first">我的家乡</a></li>
			<li><a href="#second">我的学校</a></li>
			<li><a href="#third">我的偶像</a></li>
			<li><a href="#firth">我的同学</a></li>
		</ul>
		
		<div id="home">
			<h2 id="first">我的家乡</h2>
			<p>封丘县，位于河南省东北部，新乡市东南隅，隶属于河南新乡。处于北纬34°53′~35°14′、东经114°14′~114°46′之间。封丘县地属暖温带大陆性季风气候。年平均气温13.5°C-14.5°C之间，年降水量615.1毫米，无霜期214天。县境南北长38.2公里，东西宽48.7公里。面积1220.5平方公里，耕地面积92.6万亩。辖8镇11乡（其中1个回族乡），607个行政村。封丘县是国家级贫困开发重点县（2020年取消）、河南省定农业综合开发重点县。 </p>
			<img src="home.jpg" alt="图像显示" />
		</div>
		<div id="school">
			<h2 id="second">我的学校</h2>
			<p>濮阳职业技术学院是河南省人民政府批准、国家教育部备案成立的一所全日制公办高等职业院校。
学校办学历史可以追溯到1950年3月成立的平原省立濮阳师范学校；2001年4月经河南省人民政府批准、国家教育部备案，由原濮阳教育学院、濮阳广播电视大学、濮阳师范学校、濮阳工业学校合并组建成立濮阳职业技术学院；2015年4月濮阳市人民政府依托濮阳职业技术学院与河南大学合作举办河南大学濮阳工学院。
截至2015年12月，学校占地1162亩，建筑面积31.8万平方米；固定资产总值8.55亿元，教学仪器设备总值8739万元；馆藏纸质、电子图书合计115万册。；设有11个教学系，开设56个专业及方向；有教职工734人、全日制在校生11435 人。</p>
			<img src="school.jpg" alt="" />
		</div>		
		<div id="idol">
			<h2 id="third">我的偶像</h2>
			<p>周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，中国台湾流行乐男歌手、音乐人、演员、导演、编剧、监制、商人。
2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格  。2002年举行“The One”世界巡回演唱会 。2003年成为美国《时代周刊》封面人物  。2004年获得世界音乐大奖中国区最畅销艺人奖  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖  。2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖  。2009年入选美国CNN评出的“25位亚洲最具影响力的人物”  ；同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖  。2010年入选美国《Fast Company》评出的“全球百大创意人物” 。2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖  ；同年主演好莱坞电影《青蜂侠》  。2012年登福布斯中国名人榜榜首  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》  。2016年推出专辑《周杰伦的床边故事》 。演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司  。2011年担任华硕笔电设计师并入股香港文化传信集团  。周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学 。2014年担任中国禁毒宣传形象大使</p>
			<img src="idol.jpg" alt="" />
		</div>
		<div id="classmate">
			<h2 id="firth">我的同学</h2>
			
			<div id="bj">
				<img src="mate/ljj.jpeg" alt="" id="one"/>
				<img src="mate/lzy.jpg" alt="" id="two"/>
				<img src="mate/ym.jpeg" alt="" id="three"/>
				<img src="mate/zly.jpg" alt="" id="four"/>
			</div>
		</div>
		
		<div id="bottom">
			<a href="#">回到顶部</a>
		</div>
	</body>
</html>
